<template>
  <div class="app-container">
    <div class="head-container">
      <el-upload
        ref="uploadRef"
        slot="right"
        class="filter-item"
        :headers="headers"
        :action="uploadUrl"
        :limit="1"
        :show-file-list="false"
        :http-request="customUpload"
      >
        <el-button
          type="warning"
          size="mini"
          icon="el-icon-upload2"
          plain
          @click="handleUpload"
        >上传</el-button>
      </el-upload>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { uploadAPI } from '@/api/test'

export default {
  data() {
    return {
      headers: {},
      uploadUrl: process.env.VUE_APP_BASE_API + 'api/plcError/upload'
    }
  },
  mounted() {
    this.getInfomation()
  },
  methods: {
    getInfomation() {
      const token = getToken()
      if (token) {
        this.headers = {
          'Authorization': token,
          'Content-Type': 'multipart/form-data'
        }
      }
    },
    async customUpload(file) {
      const formData = new FormData()
      formData.append('file', file.file)
      const res = await uploadAPI(formData)
      if (res.meta.code === 200) {
        this.$message.success(res.meta.msg)
      } else {
        this.$message.warning(res.data.msg)
      }
    },
    handleUpload() {
      this.$refs.uploadRef.clearFiles() // 清除已选择的文件
      this.$refs.uploadRef.submit() // 重新提交上传
    }
  }
}
</script>

<style scoped lang="scss">
</style>
